<%@ include file="header.jsp"%>
<title>Seabook Chen Personal Web Site Home</title>
</head>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script type="text/javascript">
	$(document).ready(function() {
		moodDialog();
		newsDialog();
		initCKeditor();

		getAllMoods(5);
		getAllNews(4);
		getLatestBlogPosts(3, '#latestBlogPosts');
		getLatestBlogComments(3);
		
		$("#all-moods").button();
		$("#all-news").button();
	})
</script>

<body onload="prettyPrint()">
	<%@ include file="navigation.jsp"%>
	<div class="body-wrapper">
		<div id="inner-wrapper" class="main-cotent">
			<section id="mood" class="section-home">
				<header>
					<h3 class="section-h3">Moods</h3>
				</header>
				<div id="loading-moods">Loading... <img src="images/ajax-loader.gif" /></div>
				<div id="showMoods"></div>
				<div id="moods-action"></div>
				<div class="controls">
				<c:if test="${isAdmin}">
					<button id="new-moods">Share your moods</button>
				</c:if>
				<button id="all-moods" onclick="javascript:window.location.href='allMoods.jsp';">All moods</button>
				</div>
				<div id="mood-form" title="Share your moods">
					<p class="validateTips">All form fields are required.</p>
					<form>
						<fieldset>
							<label for="moodContent">Input Your Moods:</label>
							<textarea id="moodTextArea" name="moodTextArea" cols="90"
								rows="9" class="text ui-widget-content ui-corner-all"></textarea>
							<label class="form-style" for="moodType">Mood Type:</label>
							<p>
								<span><img class="img-default" data-mood="happy"
									src="images/happy.png" alt="happy" /></span> <span><img
									class="img-default" data-mood="good" src="images/good.png"
									alt="ok" /></span> <span><img class="img-default"
									data-mood="soso" src="images/soso.png" alt="soso" /></span> <span><img
									class="img-default" data-mood="sad" src="images/sad.png"
									alt="sad" /></span> <span><img class="img-default"
									data-mood="angry" src="images/angry.png" alt="angry" /></span>
							</p>
						</fieldset>
					</form>
				</div>
			</section>

			<section id="news" class="section-home">
				<header>
					<h3 class="section-h3">News</h3>
				</header>
				<div id="loading-news">Loading... <img src="images/ajax-loader.gif" /></div>
				<div id="showNews"></div>
				<div id="news-action"></div>
				<div class="controls">
				<c:if test="${isAdmin}">
					<button id="new-news">Post your news</button>
				</c:if>
				<button id="all-news" onclick="javascript:window.location.href='allNews.jsp'">All news</button>
				</div>
				<div id="news-form" title="Post Your News">
					<p class="validateTips">All form fields are required.</p>
					<form>
						<fieldset>
							<label class="form-style" for="newsContent">Post Your
								News:</label>
							<textarea id="newsTextArea" name="newsTextArea" cols="10"
								rows="5" class="text ui-widget-content ui-corner-all"></textarea>
						</fieldset>
					</form>
				</div>
			</section>

			<section id="blogPosts" class="section-home">
				<header>
					<h3 class="section-h3">New Blog Posts</h3>
				</header>
				<div id="loading-posts">Loading... <img src="images/ajax-loader.gif" /></div>
				<div id="latestBlogPosts"></div>
			</section>

			<section id="blogComments" class="section-home">
				<header>
					<h3 class="section-h3">New Blog Comments</h3>
				</header>
				<div id="loading-comments">Loading... <img src="images/ajax-loader.gif" /></div>
				<div id="latestBlogComments"></div>
			</section>
		</div>
	</div>
	<%@ include file="footer.jsp"%>
</body>
</html>